<template>
  <div>
    <el-row>
      <el-date-picker
        v-model="searchObj.value"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" @click="query">查询</el-button>
    </el-row>
    <el-row class="ec">
      <comecharts :sendOption="echartsData"> </comecharts>
    </el-row>
    <el-row> </el-row>
  </div>
</template>

<script>
import comecharts from "../../components/comecharts";
import { api_order } from "../../api/order";
import moment from "moment";

export default {
  data() {
    return {
      searchObj: {
        value: [],
        date: "",
      },
      echartsData: {
        title: "订单统计",
        legend: ["订单"],
        xData: [],
        series: [],
      },
    };
  },
  components: {
    comecharts,
  },
  mounted() {
    this.query();
  },
  methods: {
    async query() {
      this.searchObj.date = JSON.stringify(this.searchObj.value);
      let rst = await api_order(this.searchObj);
      let xData = [];
      let arr = [];
      rst.data.forEach((item, index) => {
        xData.push(moment(item.orderTime).format("YYYY-MM-DD"));
        arr.push(item.orderAmount);
      });
      this.echartsData.xData = xData;
      this.echartsData.series = [
        {
          name: "订单",
          type: "line",
          stack: "Total",
          data: arr,
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.ec {
  height: 500px;
}
</style>